<template>
  <div class="information">
    <van-nav-bar title="消息私信"  left-arrow @click-left="$router.back()">
      <template #right>
        <span @click="isShowInformationSetting = true">设置</span>
      </template>
    </van-nav-bar>
    <div class="top">
      <div class="wrap" style="margin: 0px 0px"></div>
    <van-cell is-link center>
      <div class="cell-wrap">
        <div class="cell-left">
          <a class="img-comment"></a>
        </div>
        <div class="cell-right">
          <div slots="title">评论和@</div>
          <div slots="label" class="cell-right-label">小温暖 回复了你</div>
        </div>
      </div>
    </van-cell>
    <van-cell is-link center>
      <div class="cell-wrap">
        <div class="cell-left">
          <a  class="img-like"></a>
        </div>
        <div class="cell-right">
          <div slots="title">点赞</div>
          <div slots="label" class="cell-right-label">你的maya 点赞了你的视频</div>
        </div>
      </div>
    </van-cell>
    <van-cell is-link center>
      <div class="cell-wrap">
        <div class="cell-left">
          <a class="img-fans"></a>
        </div>
        <div class="cell-right">
          <div slots="title">粉丝</div>
          <div slots="label" class="cell-right-label">小温暖 关注了你</div>
        </div>
      </div>
    </van-cell>
    </div>
    <div class="bottom">
      <van-cell >
      <div class="cell-wrap">
        <div class="cell-left">
          <a class="img-creation-message"></a>
        </div>
        <div class="cell-right">
          <div slots="title">创作通知</div>
          <div slots="label" class="cell-right-label">邀请您参加热门话题讨论，快来看看吧</div>
        </div>
        <div class="bottom">
          <span>11-11</span>
          <van-badge :content="2" max="99" />
        </div>
      </div>
    </van-cell>
    <van-cell >
      <div class="cell-wrap">
        <div class="cell-left">
          <a class="img-system-message"></a>
        </div>
        <div class="cell-right">
          <div slots="title">系统通知</div>
          <div slots="label" class="cell-right-label">【举报通知 】亲爱的用户你好，经核实您举报的</div>
        </div>
        <div class="bottom">
          <span>11-11</span>
          <van-badge :content="2" max="99" />
        </div>
      </div>
    </van-cell>
    <van-cell  >
      <div class="cell-wrap">
        <div class="cell-left">
          <a class="img-strange-message"></a>
        </div>
        <div class="cell-right">
          <div slots="title">陌生人消息</div>
          <div slots="label" class="cell-right-label"><span>你是个大可爱是打算发叔叔把咖啡就会崩溃啊大发</span></div>
        </div>
        <div class="bottom">
          <span>11-11</span>
          <van-badge :content="2" max="99" />
        </div>
      </div>
    </van-cell>
    </div>

    <van-popup
      v-model="isShowInformationSetting"
      position="right"
      :style="{ height: '100%',width: '100%'}"
      get-container="body"
    >
     <Setting @close="isShowInformationSetting=false"/>
    </van-popup>
  </div>
</template>

<script>
import InformationSetting from '@/views/User/components/information-setting.vue'
export default {
  name: 'Information',
  components: {
    Setting: InformationSetting
  },
  data () {
    return {
      isShowInformationSetting: false
    }
  },
  created () {},
  methods: {}
}
</script>
<style lang="scss" scoped>
.top,.bottom{
  padding-top: 5px;
  background-color: rgb(244, 243, 243);
}
.cell-wrap {
  display: flex;
  .cell-right{
    overflow: hidden; //隐藏文字
    flex:1;
    .cell-right-label{
      color: rgb(173, 172, 172);
      text-overflow:ellipsis;
      white-space:nowrap;
      overflow: hidden;
    }
  }
  .cell-left{
    margin-right:10px;
    width: 45px;
    height: 45px;
    a{
      width: 100%;
      height: 100%;
      display:block;
      border-radius: 50%;
    }
    .img-comment{
    background: url(~@/assets/imges/user/jlt.png) no-repeat;
    background-size:45px 385px;
    background-position:0px 0px;
   }
    .img-like{
    background: url(~@/assets/imges/user/jlt.png) no-repeat;
    background-size:45px 385px;
    background-position:0px -67px;
   }
    .img-fans{
    text-indent: -1000px;
    background: url(~@/assets/imges/user/jlt.png) no-repeat;
    background-size:45px 385px;
    background-position:0px -134px;
   }
    .img-creation-message{
    text-indent: -1000px;
    background: url(~@/assets/imges/user/jlt.png) no-repeat;
    background-size:45px 385px;
    background-position:-1px -206px;
   }
    .img-system-message{
    text-indent: -1000px;
    background: url(~@/assets/imges/user/jlt.png) no-repeat;
    background-size:45px 385px;
    background-position:-1px -273px;
   }
    .img-strange-message{
    text-indent: -1000px;
    background: url(~@/assets/imges/user/jlt.png) no-repeat;
    background-size:45px 385px;
    background-position:-1px -341px;
   }
  }
  .bottom{
    display:flex;
    width: 50px;
    padding: 0px 2px;
    flex-direction: column;
    align-items:center;
    background-color: #fff;
    span{
      color: rgb(220, 215, 215)
    }
  }
}
</style>
